<template>
  <div class="pannel-container flex-column">
    <div class="pannel-title flex-between">
      <span class="t-name">环境数据</span>
      <div class="flex-box detail" @click="detailClick">
        <span>详情</span>
        <img src="../../assets/imgs/detail_icon.png" alt="">
      </div>
    </div>
    <div class="content">
      <div class="dev-box" v-for="item in devList">
        <div class="dev">{{item.name}}</div>
        <div class="params-box flex-box">
          <div class="params flex-box" :class="params.key" v-for="params in item.params">
            <div class="icon"  ></div>
            <div class="right flex-column">
              <span class="name">{{params.name}}</span>
              <span class="value">{{params.value}}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name:'env',
    data(){
      return{
        devList:[
          {
            name:'设备一',
            params:[
              {
                name:'温度 (°C)',
                key:'temperature',
                value:0
              },{
                name:'湿度（%）',
                key:'humidity',
                value:0
              },{
                name:'气压（Pa）',
                key:'pressure',
                value:0
              },
            ]
          },
          {
            name:'设备二',
            params:[
              {
                name:'温度(°C)',
                key:'temperature',
                value:0
              },{
                name:'湿度（%）',
                key:'humidity',
                value:0
              },{
                name:'气压（Pa）',
                key:'pressure',
                value:0
              },
            ]
          },
        ]
      }
    },
    props:{
      environmentalList:{
        type:Array,
        default:[]
      }
    },
    methods:{
      detailClick(){
        this.$emit('detailClick',{
          type:'device'
        })
      },
      setOption(){
        if(this.environmentalList.length){
          this.devList.forEach((o,i)=>{
            o.name = this.environmentalList[i].deviceName;
            o.params[0].value = this.environmentalList[i].temperature || 0
            o.params[1].value = this.environmentalList[i].humidity || 0
            o.params[2].value = this.environmentalList[i].pressure || 0
          })
        }

      }
    },
    mounted () {
    }
  }
</script>
<style scoped lang="scss">
  .pannel-container{
    width: 100%;
    background: url("../../assets/imgs/env_bg.png");
    padding: 23px ;
    .pannel-title{
      background: url("../../assets/imgs/env_title.png")no-repeat;
    }
    .content{
      padding: 0 20px;
      font-weight: bold;
      .dev-box{
        margin-top: 45px;
        .dev{
          background: url("../../assets/imgs/dev_bg.png")no-repeat;
          background-size: 100% 100%;
          color: #8EBBFE;
          font-size: 36px;
          padding: 15px 35px;
          display: inline;

        }
        .params-box{
          margin-top: 40px;
          .params+.params{
            position: relative;
            &:before{
              position: absolute;
              left: -23px;
              width: 1px;
              height: 100%;
              background: rgba(163, 163, 163, 0.22);
              content: '';
            }
          }
          .params{
            flex: 1;
            &.temperature{
              .icon{
                background: url("../../assets/imgs/temp.png")no-repeat;
              }
              .value{
                color:#F89E86;
              }
            }
            &.humidity{
              .icon {
                background: url("../../assets/imgs/humidity.png") no-repeat;
              }
              .value{
                color:#35D2FF;
              }
            }
            &.pressure{
              .icon {
                background: url("../../assets/imgs/pressure.png") no-repeat;
              }
              .value{
                color: #9CC6FF;
              }
            }
            .icon{
              background-size: 100% 100%;
              width: 93px;
              height: 94px;
              margin-right: 20px;
            }
            .right{
              .name{
                font-size: 32px;
                color: rgba(255, 255, 255, 0.8);
                word-break: keep-all;
                white-space: nowrap;
              }
              .value{
                font-family: number-font;
                font-weight: normal;
                margin-top: 5px;
                font-size: 56px;
                font-style: italic;
                line-height: 1;
              }
            }
          }
        }
      }
    }
  }
</style>
